<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/templates/plantilla1.xhtml">

    <ui:define name="contenido">

        <h:form id="formUser">

            <ui:fragment rendered="#{guardarUsuarioBean.crearCliente}">
                <h1>Registro</h1>
            </ui:fragment>

            <ui:fragment rendered="#{guardarUsuarioBean.crearUsuario}">
                <h1>Crear Usuario</h1>
            </ui:fragment>

            <ui:fragment rendered="#{guardarUsuarioBean.editar}">
                <h1>Editar Usuario</h1>
            </ui:fragment>

            <p:panel id="usuarioPanel">

                <f:facet name="header">Datos de Usuario</f:facet> 

                <table>
                    <!-- email -->
                    <tr>
                        <td>* Email</td>
                    </tr>
                    <tr>
                        <td><p:message for="email" /></td>
                    </tr>
                    <tr>
                        <td>
                            <p:inputText id="email" value="#{guardarUsuarioBean.usuario.email}" required="true" />
                        </td>
                    </tr>

                    <ui:fragment rendered="#{!guardarUsuarioBean.editar}">
                    
                        <!-- contraseña -->
                        <tr>
                            <td>* Contraseña</td>
                        </tr>
                        <tr>
                            <td><p:message for="password" /></td>
                        </tr>
                        <tr>
                            <td>
                                <p:password id="password" 
                                             value="#{guardarUsuarioBean.usuario.password}" 
                                             required="true" >
                                    <p:ajax process="@this"  global="false"/>
                                </p:password>
                            </td>
                        </tr>

                        <!-- comprobar contraseña -->
                        <tr>
                            <td>* Repetir Contraseña</td>
                        </tr>
                        <tr>
                            <td><p:message for="password2" /></td>
                        </tr>
                        <tr>
                            <td>
                                <p:password id="password2" required="true" 
                                             validator="#{guardarUsuarioBean.validarPasswordCoinciden}" />
                            </td>
                        </tr>
                    
                    </ui:fragment>

                    <!-- roles -->
                    <ui:fragment rendered="#{!guardarUsuarioBean.crearCliente}">
                        <tr>
                            <td>* Roles</td>
                        </tr>
                        <tr>
                            <td><p:message id="msjRoles" for="roles" /></td>
                        </tr>
                        <tr>
                            <td>
                                <p:pickList id="roles" 
                                            value="#{guardarUsuarioBean.perfilPickList}"
                                            var="p"
                                            itemValue="#{p}"
                                            itemLabel="#{p.nombre}"
                                            converter="jsonConverter">

                                    <f:facet name="sourceCaption">Disponibles</f:facet>  
                                    <f:facet name="targetCaption">Asignados</f:facet>  

                                    <p:ajax event="transfer" listener="#{guardarUsuarioBean.moverRoles}" 
                                            process="@this" 
                                            update="@this msjRoles :formUser:clienteOutputPanel" />  

                                </p:pickList>
                            </td>
                        </tr>
                    </ui:fragment>

                </table>


            </p:panel>

            <p:outputPanel id="clienteOutputPanel">

                <ui:fragment rendered="#{guardarUsuarioBean.usuario.cliente != null}">
                    
                    <br/>

                    <p:panel id="clientePanel" >

                        <f:facet name="header">Datos de Cliente</f:facet>

                        <table>
                            <!-- RUN -->
                            <tr><td>* RUN</td></tr>
                            <tr>
                                <td><p:message id="msjRun" for="run" /></td>
                            </tr>
                            <tr>
                                <td>
                                    <p:inputText id="run" styleClass="validaRut"
                                                 value="#{guardarUsuarioBean.usuario.cliente.run}"
                                                 converter="rutConverter" required="true" >
                                        <p:ajax event="blur" process="@this"
                                                update="@this msjRun" global="false" />
                                    </p:inputText>
                                </td>
                            </tr>

                            <!-- NOMBRES -->
                            <tr><td>* Nombres</td></tr>
                            <tr>
                                <td><p:message for="nombres" /></td>
                            </tr>
                            <tr>
                                <td>
                                    <p:inputText id="nombres" 
                                                 value="#{guardarUsuarioBean.usuario.cliente.nombres}"
                                                 required="true" />
                                </td>
                            </tr>

                            <!-- APELLIDOS -->
                            <tr><td>* Apellidos</td></tr>
                            <tr>
                                <td><p:message for="apellidos" /></td>
                            </tr>
                            <tr>
                                <td>
                                    <p:inputText id="apellidos" 
                                                 value="#{guardarUsuarioBean.usuario.cliente.apellidos}"
                                                 required="true" />
                                </td>
                            </tr>

                            <!-- FECHA NACIMIENTO -->
                            <tr><td>* Fecha Nacimiento</td></tr>
                            <tr>
                                <td><p:message for="fechanac" /></td>
                            </tr>
                            <tr>
                                <td>
                                    <p:calendar id="fechanac" 
                                                value="#{guardarUsuarioBean.usuario.cliente.fechaNacimiento}" 
                                                readonlyInput="true"
                                                locale="es" 
                                                navigator="true" 
                                                pattern="dd/MM/yyyy" 
                                                yearRange="-100:+0" 
                                                showOn="button"
                                                required="true"/>
                                </td>
                            </tr>

                            <!-- FONO FIJO -->
                            <tr><td>Fono Fijo</td></tr>
                            <tr>
                                <td><p:message for="fonofijo" /></td>
                            </tr>
                            <tr>
                                <td>
                                    <p:inputText id="fonofijo" 
                                                 value="#{guardarUsuarioBean.usuario.cliente.fonoFijo}" />
                                </td>
                            </tr>

                            <!-- FONO MOVIL -->
                            <tr><td>Fono Movil</td></tr>
                            <tr>
                                <td><p:message for="fonomovil" /></td>
                            </tr>
                            <tr>
                                <td>
                                    <p:inputText id="fonomovil" 
                                                 value="#{guardarUsuarioBean.usuario.cliente.fonoMovil}" />
                                </td>
                            </tr>

                        </table>

                    </p:panel>

                </ui:fragment>

            </p:outputPanel>

            <br/>
            
            <div class="botonera">

                <p:commandButton value="#{guardarUsuarioBean.nombreBotonGuardar}"
                                 action="#{guardarUsuarioBean.guardar()}" process="@form" update="@form" />

                <p:commandButton value="Cancelar" 
                                 action="cancelar" 
                                 immediate="true" 
                                 ajax="false" />
            </div>


            <p:confirmDialog id="exitoDialog" widgetVar="exitoDialogWV" 
                             header="Información"  
                             closable="false"
                             message="Guardado exitoso."  >  
                <p:commandButton value="Aceptar" 
                                 action="guardado_exitoso"
                                 styleClass="ui-confirmdialog-yes" 
                                 icon="ui-icon-check" 
                                 immediate="true"
                                 ajax="false"
                                 />  
            </p:confirmDialog>


        </h:form>

    </ui:define>
</ui:composition>
